<template>
<div>
  <v-form
    ref="form"
    :lazy-validation="false">
    <v-card>
      <v-card-title>新建订单</v-card-title>
      <v-card-text>
        <v-expansion-panels
          v-model="panel"
          multiple
          tile>
          <v-expansion-panel readonly>
            <v-expansion-panel-header hide-actions>
              <v-row justify="space-between">
                <span>客户信息</span>
                <v-btn outlined color="indigo" @click="showSelectCustom = true">
                  <v-icon>mdi-account</v-icon>
                  选择客户
                </v-btn>
              </v-row>
            </v-expansion-panel-header>
            <v-divider />
            <v-expansion-panel-content>
              <v-row align="center" class="pt-3">
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right"><small class="red--text mr-1">({{$t('other.required')}})</small>客户名称：</div>
                    <v-col class="pa-0">
                      <v-text-field
                        v-model="formData.company_name"
                        dense
                        :rules="[rules.required]"
                        required
                        >
                      </v-text-field>
                    </v-col>
                  </v-row>
                </v-col>
                <v-col cols="6" class="py-0"></v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">联系人：</div>
                    <v-col class="pa-0">
                      <v-text-field
                        v-model="formData.operator_a"
                        clearable
                        >
                      </v-text-field>
                    </v-col>
                  </v-row>
                </v-col>
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">联系电话：</div>
                    <v-col class="pa-0">
                      <v-text-field
                        v-model="formData.telphone"
                        clearable
                        >
                      </v-text-field>
                    </v-col>
                  </v-row>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">甲方团号：</div>
                    <v-col class="pa-0">
                      <v-text-field
                        v-model="formData.code_a"
                        clearable
                        >
                      </v-text-field>
                    </v-col>
                  </v-row>
                </v-col>
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">客源地：</div>
                    <v-col class="pa-0">
                      <v-text-field
                        v-model="formData.source"
                        clearable
                        >
                      </v-text-field>
                    </v-col>
                  </v-row>
                </v-col>
              </v-row>
            </v-expansion-panel-content>
          </v-expansion-panel>

          <v-expansion-panel readonly>
            <v-expansion-panel-header hide-actions>
              <v-row justify="space-between">
                <span>项目类别</span>
                <v-menu
                  bottom
                  offset-y
                >
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn
                      outlined
                      color="indigo"
                      v-bind="attrs"
                      v-on="on"
                    >{{ $t('actions.add') }}</v-btn>
                  </template>
                  <v-list>
                    <v-list-item
                      v-for="(item, i) in [{title: '酒店'}, {title: '景点'}]"
                      :key="i"
                      dense
                      @click="() => {}"
                    >
                      <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
                <!-- <v-btn outlined color="indigo" @click="addTourist">{{ $t('actions.add') }}</v-btn> -->
              </v-row>
            </v-expansion-panel-header>
            <v-divider />
            <el-table
              :data="touristData">
              <el-table-column
                label="预订状态"
                width="180">
                <template slot-scope="{ row }">
                  <v-chip color="warning" small>未预订</v-chip>
                </template>
              </el-table-column>
              <el-table-column
                label="类型"
                width="120">
                <template>
                  <span>酒店</span>
                </template>
              </el-table-column>
              <el-table-column
                label="酒店名称"
                width="180">
                <template slot="header">
                  <span class="mr-1">酒店名称</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.fullname"
                    outlined
                    single-line
                    hide-details
                    dense
                    :rules="[rules.required]"
                    required
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="房型"
                width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.fullname"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="入住日期"
                width="240">
                <template slot="header">
                  <span class="mr-1">入住日期</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <el-date-picker v-model="formData.order_date" value-format="yyyy-MM-dd" size="small" type="date"></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="退房日期"
                width="240">
                <template slot="header">
                  <span class="mr-1">退房日期</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <el-date-picker v-model="formData.order_date" value-format="yyyy-MM-dd" size="small" type="date"></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="数量"
                width="100">
                <template slot="header">
                  <span class="mr-1">数量</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="天数"
                width="100">
                <template slot-scope="{ row }">
                  <span>1</span>
                </template>
              </el-table-column>
              <el-table-column
                label="销售单价"
                width="180">
                <template slot="header">
                  <span class="mr-1">销售单价</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="成本价"
                width="180">
                <template slot="header">
                  <span class="mr-1">成本价</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="销售总额"
                width="180">
                <template slot-scope="{ row }">
                  <span>1</span>
                </template>
              </el-table-column>
              <el-table-column
                label="成本总额"
                width="180">
                <template slot-scope="{ row }">
                  <span>1</span>
                </template>
              </el-table-column>
              <el-table-column
                label="额外费用"
                width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="额外费用说明"
                width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                min-width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                :label="$t('other.action')"
                width="80">
                <template slot-scope="{ $index }">
                  <v-btn small color="warning" outlined @click="handleRmoveConcatUser($index)">{{ $t('actions.delete') }}</v-btn>
                </template>
              </el-table-column>
            </el-table>
          </v-expansion-panel>

          <v-expansion-panel readonly>
            <v-expansion-panel-header hide-actions>订单基本信息</v-expansion-panel-header>
            <v-divider />
            <v-expansion-panel-content>
              <v-row align="center" class="pt-3">
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">团号：</div>
                    <v-col class="py-0">
                      <div class="d-flex align-center">
                        <SelectGroupcode v-model="formData.code_sign1" outlined/>
                        <span class="mx-1">-</span>
                        接团日期
                        <span class="mx-1">-</span>
                        客户代码
                      </div>
                    </v-col>
                  </v-row>
                </v-col>
                <v-col cols="6" class="py-0">
                  <!-- <v-checkbox
                    v-model="panel"
                    label="自动生成团号"
                    hide-details
                    dense
                    class="mt-0 pt-0"
                  ></v-checkbox> -->
                </v-col>
              </v-row>
              <v-row align="center">
                <div style="width: 140px;" class="text-right"><small class="red--text mr-1">(必填)</small>产品名称：</div>
                <v-col class="pa-0">
                  <v-text-field
                    v-model="formData.name"
                    clearable
                    :rules="[rules.required]"
                    required
                    >
                  </v-text-field>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">接团日期：</div>
                    <v-col class="py-0"><el-date-picker v-model="formData.order_date" value-format="yyyy-MM-dd" size="small" type="date"></el-date-picker></v-col>
                  </v-row>
                </v-col>
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">散团日期：</div>
                    <v-col class="py-0"><el-date-picker v-model="formData.order_date" value-format="yyyy-MM-dd" size="small" type="date"></el-date-picker></v-col>
                  </v-row>
                </v-col>
              </v-row>
              <v-row align="center">
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">备注：</div>
                    <v-col class="py-0">
                      <v-text-field
                        v-model="formData.remark"
                        clearable
                        >
                      </v-text-field>
                    </v-col>
                  </v-row>
                </v-col>
                <v-col cols="6" class="py-0">
                  <v-row align="center">
                    <div style="width: 140px;" class="text-right">订单日期：</div>
                    <v-col class="py-0"><el-date-picker v-model="formData.order_date" value-format="yyyy-MM-dd" size="small" type="date"></el-date-picker></v-col>
                  </v-row>
                </v-col>
              </v-row>
            </v-expansion-panel-content>
          </v-expansion-panel>

          <v-expansion-panel readonly>
            <v-expansion-panel-header hide-actions>
              <v-row justify="space-between">
                <span>游客信息</span>
                <v-btn outlined color="indigo" @click="addTourist">{{ $t('actions.add') }}</v-btn>
              </v-row>
            </v-expansion-panel-header>
            <v-divider />
            <el-table
              :data="touristData">
              <el-table-column
                fixed="left"
                type="index"
                label="序号"
                width="60">
              </el-table-column>
              <el-table-column
                label="游客类型"
                width="180">
                <template slot-scope="{ row }">
                  <v-select
                    v-model="row.sex"
                    :items="[{key: 1, name: '男', key: 2, name: '女'}]"
                    item-text="name"
                    item-value="key"
                    outlined
                    dense
                    hide-details
                  ></v-select>
                </template>
              </el-table-column>
              <el-table-column
                label="姓名"
                width="180">
                <template slot="header">
                  <span class="mr-1">姓名</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.fullname"
                    outlined
                    single-line
                    hide-details
                    dense
                    :rules="[rules.required]"
                    required
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="英文名"
                width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.fullname"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="性别"
                width="140">
                <template slot-scope="{ row }">
                  <v-select
                    v-model="row.sex"
                    :items="['男', '女']"
                    outlined
                    dense
                    hide-details
                  ></v-select>
                </template>
              </el-table-column>
              <el-table-column
                label="证件类型"
                width="160">
                <template slot-scope="{ row }">
                  <v-select
                    v-model="row.sex"
                    :items="[{key: 2, name: '女'}, {key: 1, name: '男'}]"
                    item-text="name"
                    item-value="key"
                    outlined
                    dense
                    hide-details
                  ></v-select>
                </template>
              </el-table-column>
              <el-table-column
                label="证件号码"
                width="180">
                <template slot="header">
                  <span class="mr-1">证件号码</span>
                  <small style="color: red">({{$t('other.required')}})</small>
                </template>
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.fullname"
                    outlined
                    single-line
                    hide-details
                    dense
                    :rules="[rules.required]"
                    required
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="证件有效期"
                width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="联系电话"
                width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="国籍"
                width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                min-width="180">
                <template slot-scope="{ row }">
                  <v-text-field
                    v-model="row.phone"
                    outlined
                    single-line
                    hide-details
                    dense
                  ></v-text-field>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                :label="$t('other.action')"
                width="80">
                <template slot-scope="{ $index }">
                  <v-btn small color="warning" outlined @click="handleRmoveConcatUser($index)">{{ $t('actions.delete') }}</v-btn>
                </template>
              </el-table-column>
            </el-table>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-card-text>
    </v-card>
  </v-form>
  <SelectCustom :show.sync="showSelectCustom" @selection="handleChangeCustom"/>
</div>
</template>

<script>
import SelectCustom from '../components/select-custom'
import SelectGroupcode from '../components/select-groupcode'
export default {
  components: {
    SelectCustom,
    SelectGroupcode
  },
  data() {
    return {
      panel: [0, 1, 2],
      showSelectCustom: false,
      formData: {
        company_name: '',
        operator_a: '',
        telphone: '',
        code_a: '',
        source: '',
        order_date: '',
        name: ''
      },

      touristData: [],

      rules: {
        required: value => !!value || 'required',
      },
    }
  },
  methods: {
    // 选择客户更改时
    handleChangeCustom(selection) {
      
    },

    handleRmoveConcatUser(index) {

    },

    // 添加游客
    addTourist() {
      this.touristData.push({
        fullname: '',
        phone: '',
        email: ''
      })
    },
    // 删除游客
    handleRmoveTourist(index) {
      this.touristData.splice(index, 1)
    },
  }
}
</script>

<style>

</style>